import React from 'react'
import { Form, Input, Button } from 'antd'
import { Col } from 'antd'
import regExp from '@/constants/regExp'

const FormItem = Form.Item;

const LoginForm = (props) => {

  const { getFieldDecorator } = props.form

  const {
    account,
    smsNum,
    ip,
    receiveUrl,
    saveButtonLoading,
    onChangeIp,
    onChangeReceiveUrl,
    onChangeRemindPhone,
    onChangeRemindValue,
    onSave,
  } = props

  const formItemLayout = { 
    labelCol: { span: 3 },
    wrapperCol: { span: 15 }
  }

  return (
    <Form onSubmit={props.onLogin} className="login-form">
      <FormItem {...formItemLayout} label="账号">
        {account}
      </FormItem>
      <FormItem {...formItemLayout} label="当前余额(条)">{smsNum}</FormItem>
      <FormItem {...formItemLayout} label="绑定IP">
        <Input.TextArea 
          className="skin-text-area"
          placeholder="多个IP之间以英文逗号分隔，为空表示不限制请求IP。" 
          value={ip}
          onChange={onChangeIp}  
        />
      </FormItem>
      <FormItem {...formItemLayout} label="上行推送地址">
        <Input className="skin-text-area" value={receiveUrl} onChange={onChangeReceiveUrl} placeholder="例如：http://www.baidu.com" />
      </FormItem>
      <FormItem {...formItemLayout} label="余额提醒号码">
        {getFieldDecorator('remindPhone', {
          rules: [{ message: '手机号格式不正确!', pattern: regExp.phone }],
        })(
          <Input className="skin-text-area" onChange={onChangeRemindPhone} placeholder="例如：18888888888" />
        )}
      </FormItem>
      <FormItem {...formItemLayout} label="余额提醒条数">
        {getFieldDecorator('remindValue', {
            rules: [{ message: '请输入数字', pattern: regExp.number }],
        })(
          <Input className="skin-text-area"  onChange={onChangeRemindValue} placeholder="例如：1000" />
        )}
      </FormItem>
      <FormItem>
        <Col offset={3}>
          <Button 
            type="primary" 
            htmlType="submit" 
            className="login-form-button"
            loading={saveButtonLoading}
            onClick={() => props.form.validateFields((error) => !error && onSave())}
            style={{width: '100px'}}
          >
            保存
          </Button>
        </Col>
      </FormItem>
    </Form>
  )

} 

export default Form.create({
  mapPropsToFields(props) {
    return {
      remindPhone: Form.createFormField({ value: props.remindPhone }),
      remindValue: Form.createFormField({ value: props.remindValue })
    } 
  }
})(LoginForm)